<template>
	<view class="tab-box" :style="{ marginTop: statusBarHeight + 'px', paddingRight: menuButtonWidth + 'px' }">
		<view class="arrow-left" @click="navBackFunc">
			<u-icon name="arrow-left" color="#303133" size="20px"></u-icon>
		</view>
		<u-tabs @click="tabClickFunc" :current="tabIndex" :lineColor="`url(${icon}) 100% 100%`" :list="tabList"
			inactiveStyle="font-weight: 400;font-size: 32rpx;color: #6A6666;"
			activeStyle="font-weight: 500;font-size: 40rpx;color: #000000;"></u-tabs>
	</view>
</template>

<script>
	export default {
		name: 'listTabCom',
		props: {
			tabList: {
				type: Array,
				default: []
			},
			current: {
				default: 0
			}
		},
		data() {
			return {
				statusBarHeight: 0,
				menuButtonWidth: 0,
				tabIndex: 0,
				icon: require('../../static/images/tabicon.png')
			};
		},
		watch: {
			current(val) {
				setTimeout(() => {
					this.tabIndex = Number(val);
				}, 50);
			}
		},
		mounted() {
			this.systemInfoFunc();
			this.tabIndex = Number(this.current);
		},
		methods: {
			// 获取导航栏信息
			systemInfoFunc() {
				// 获取系统信息
				const systemInfo = uni.getSystemInfoSync();
				// console.log(systemInfo, 'systemInfo');
				this.statusBarHeight = systemInfo.statusBarHeight; // 状态栏高度
				const titleBarHeight = 44; // 固定值（小程序导航栏标题高度）
				// 胶囊按钮信息
				const menuButton = uni.getMenuButtonBoundingClientRect();
				this.menuButtonWidth = menuButton.width;
				// console.log(menuButton, 'menuButton');
			},
			tabClickFunc(e) {
				this.tabIndex = e.index;
				this.$emit('topTabClick', e.index);
			},
			navBackFunc() {
				const pages = getCurrentPages();
				if (pages.length == 1) {
					uni.reLaunch({
						url: '/pages/index/index'
					});
					return
				}
				uni.navigateBack();
			},
		}
	};
</script>

<style lang="scss" scoped>
	.arrow-left {
		position: absolute;
		left: 20rpx;
		top: 50%;
		transform: translateY(-50%);
	}
</style>